import React, { FC } from 'react';
import { Layout, Menu, Popover } from 'antd';
import { Link } from 'umi';
import logo from '../assets/base/logo.png';
import CONFIG from '../config/index';
import avatar from '../assets/base/avatar.png';

const { Sider } = Layout;
import { routes } from '../router';

interface IProps {
  isShow: boolean;
}

const AvatarMenu = () => {
  return (
    <div>
      <p>我的信息</p>
      <p>设置</p>
    </div>
  );
};

const BasicNav: FC<IProps> = ({ isShow }) => {
  return (
    <Sider
      theme="dark"
      className="menu-left"
      trigger={null}
      collapsible
      collapsed={isShow}
    >
      <div className="logo-wrap">
        <img src={logo} alt="" />
        <p className={isShow ? 'hide' : 'show'}>{CONFIG.title}</p>
      </div>
      <Menu mode="inline" defaultSelectedKeys={['home']}>
        {routes.map((menu) => {
          if (menu.routes && menu.routes.length > 0) {
            return (
              <Menu.SubMenu key={menu.key} icon={menu.icon} title={menu.name}>
                {menu.routes.map((item) => (
                  <Menu.Item key={item.key} icon={item.icon}>
                    <Link to={item.path}>{item.name}</Link>
                  </Menu.Item>
                ))}
              </Menu.SubMenu>
            );
          } else {
            return (
              <Menu.Item key={menu.key} icon={menu.icon}>
                <Link to={menu.path}>{menu.name}</Link>
              </Menu.Item>
            );
          }
        })}
      </Menu>
      <div className="nav-button">
        <Popover placement="right" content={AvatarMenu} trigger="click">
          <img className="avatar" src={avatar} alt="" />
        </Popover>
        <p className="user-name">刘德华三号</p>
      </div>
    </Sider>
  );
};

export default BasicNav;
